<template>
	<view class="main">
		<u-navbar :is-back="true" title="商品编辑" :background="background" back-icon-color="#000000" title-color="#000"
			title-bold="true"></u-navbar>
		<view class="shop_img">
			<image :src="url==''?details.image:url" mode=""></image>
			<text @click="upimg()">重新上传图片</text>
		</view>
		<view class="shop_tit">
			<view class="title">
				商品标题
			</view>
			<textarea type="text" v-model="details.name" maxlength="-1" />
		</view>
		<view class="shop_type">
			<view class="type_tit">
				商品分类
			</view>
			<view class="type" @click="changetype">
				<text>{{details.cname==''?'请选择':details.cname}}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="shop_type">
			<view class="type_tit">
				商品分类
			</view>
			<view class="type" @click="changetype">
				<text>{{details.cname==''?'请选择':details.cname}}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="shop_type">
			<view class="type_tit">
				原价
			</view>
			<view class="type">
				<input type="number" placeholder="请输入原价" v-model="details.maxPrice" />
			</view>
		</view>
		<view class="shop_type">
			<view class="type_tit">
				现价
			</view>
			<view class="type">
				<input type="number" placeholder="请输入现价" v-model="details.minPrice" />
			</view>
		</view>
		<view class="shop_content">
			<view class="cont_tit">
				商品描述
			</view>
			<view class="cont_txt">
				<textarea v-model="details.content" maxlength="-1" />
			</view>
		</view>
		<view class="specification">
			<text>规格</text>
			<image src="../../../static/images/guige.png" mode=""
				@click="router('../../users/add_operate/add_operate',details)"></image>
		</view>
		<view class="num" v-for="(item,index) in details.specs" :key="index">
			<!-- 	<view class="money ">
				¥40.05
			</view> -->
			<view class="ml">
				{{item.ggname}}
			</view>
	<!-- 		<view class="money money2" v-if="indexs!=index">
				¥{{item.price}}
			</view>
			<input type="text" v-if="indexs==index" v-model="item.price" @blur="confirm(item)" /> -->
			<view style="display: flex;">
				<view class="operate">
					<!-- <view class="change" @click="changes(index)">
						编辑
					</view> -->
					<view class="remove" @click="down(item.id)">
						{{item.on_sale==0?'上架':'下架'}}
					</view>
				</view>
			</view>
		</view>
		<!-- 	<view class="num num_two">
			<view class="ml">
				400ML..
			</view>
			<view class="money money2">
				¥40.05
			</view>
			<view class="nums">
				<view class="pad">
					<u-icon name="minus"></u-icon>
				</view>
				<view class="pad bord">
					100
				</view>
				<view class="pad">
					<u-icon name="plus"></u-icon>
				</view>
			</view>
		</view> -->
		<view class="confirm" @click="changed">
			确定
		</view>
		<u-popup v-model="show" mode="bottom" height="700" border-radius="28" duration="300">
			<view class="lists">
				<view class="content" v-for="(item,index) in typelist" :key="index"
					@click="selecttype(item.id,item.name)">
					<text>{{item.name}}</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>

		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#fff'
				},
				show: false,
				typelist: [],
				type: '',
				details: '',
				indexs: null,
				shoptypeid: '',
				content: '',
				url: '',
				falg: false,
				
				endimg:''

			}
		},
		onLoad(data) {
			this.details = JSON.parse(decodeURIComponent(data.details))
			console.log('参数为', this.details);
			this.endimg=this.details.image
			console.log('治愈后', this.endimg);

		},
		mounted() {
			// this.getlist()
		},
		onShow() {
			this.gettypelist()
			this.indexs = null
		},
		methods: {
			confirm(e) {
				console.log(e);
				this.indexs = null
				global.$http.request({
					url: '/shopapi/Specs/specsupdataprice',
					data: {
						token: uni.getStorageSync('token'),
						id: e.id,
						price: e.price,
					}
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 700
						})

					}
				})
			},
			getlist() {
				console.log(2);
				global.$http.request({
					url: '/shopapi/goods/goodspecs',
					data: {
						token: uni.getStorageSync('token'),
						id: this.details.id
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.details.specs = res.data.data
						console.log(this.details.specs);
					}
				})
			},
			changes(index) {
				this.indexs = index
			},
			down(id) {
				global.$http.request({
					url: '/shopapi/Specs/specsupdata',
					data: {
						token: uni.getStorageSync('token'),
						id: id
					}
				}).then(res => {
					if (res.data.code == 200) {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 700
						})
						this.getlist()
					}
				})
			},

			//类型列表
			gettypelist() {
				global.$http.request({
					url: '/shopapi/goods/goodsCategorylist',
					data: {
						token: uni.getStorageSync('token'),
						shop_id: uni.getStorageSync('userinfo').shop_info.shop_id
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.typelist = res.data.data
					}
				})
			},
			changetype() {
				this.show = true
			},
			//选择类型
			selecttype(id, name) {
				this.show = false
				console.log(id);
				this.details.category = id
				this.details.cname = name
				// global.$http.request({
				// 	url:'',
				// 	data:{

				// 	},
				// }).then(res={

				// })
			},
			//上传图片
			upimg() {

				var that = this
				uni.chooseImage({
					count: 3,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						global.$http.upload('/api/home/picterUp', {
							filePath: tempFilePaths[0], // 要上传文件资源的路径。
							name: 'images', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
							formData: {
								token: uni.getStorageSync('token'),
							}, // HTTP 请求中其他额外的 form data
						}).then(res => {
							that.url = res.data.data.image
							console.log(that.url);
							that.details.image = res.data.data.images
							console.log(that.details.image);
							this.falg = true
						})
					}
				});
			},
			changed() {
				if (!this.falg) {
					this.details.image = this.details.images
				}

				if (this.details.name == '') {
					this.details.image=this.endimg
					uni.showToast({
						title: '商品名称不可为空',
						icon: 'none',
						duration: 700
					})
				} else {
					global.$http.request({
						url: '/shopapi/goods/goodupdate',
						data: {
							token: uni.getStorageSync('token'),
							goodid: this.details.id,
							category: this.details.category,
							name: this.details.name,
							image: this.details.image,
							content: this.details.content,
							del_price:this.details.maxPrice,
							price:this.details.minPrice,
						}
					}).then(res => {
						console.log(res);
						if (res == undefined) {
							this.details.image=this.endimg
						}
						if (res.data.code == 200) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none',
								duration: 700
							})
							this.details.image=this.endimg
							setTimeout(function() {
								let pages = getCurrentPages(); // 当前页面
								let beforePage = pages[pages.length - 2]; // 前一个页面
								uni.navigateBack({
									delta: 1,
									success: function() {
										beforePage.onLoad(); // 执行前一个页面的onLoad方法
									}
								})
							}, 700)
						}
					})
				}

			},
			router(path, id) {
				uni.navigateTo({
					url: path + '?id=' + encodeURIComponent(JSON.stringify(id))
				})
			}
		}
	}
</script>
<style lang="scss">
	page {
		font-family: PingFang SC;
		width: 750rpx;
		margin: 0 auto;
		background-color: #f7f7f7;
		padding-bottom: 250rpx;

		.main {
			width: 750rpx;
			margin: 0 auto;

			.lists {
				.content {
					padding: 30rpx;
					background-color: #fff;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
					font-weight: 400;
					color: #000000;
					border-bottom: 2rpx solid #f7f7f7;

					image {
						width: 18rpx;
						height: 18rpx;
					}

				}

			}

			.shop_img {
				background-color: #fff;
				margin: 2rpx 0;
				padding: 35rpx 25rpx;
				display: flex;

				text {
					padding: 35rpx 0 0 19rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #0F82FF;

				}

				image {
					width: 220rpx;
					height: 220rpx;
				}
			}

			.shop_tit {
				padding: 41rpx 20rpx 0 20rpx;
				background-color: #fff;
				font-weight: bold;
				margin-bottom: 2rpx;

				.title {
					font-size: 30rpx;

					color: #808080;
				}

				textarea {
					width: 100%;
					height: 150rpx;
					display: block;
					padding: 29rpx 0 70rpx 0;
					font-size: 30rpx;
					color: #000000;
				}
			}

			.shop_type {
				padding: 40rpx 20rpx;
				margin-bottom: 2rpx;
				background-color: #fff;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.type_tit {
					font-size: 30rpx;
					font-weight: bold;
					color: #808080;
				}

				.type {

					font-size: 30rpx;
					font-weight: bold;
					color: #000000;
					display: flex;
					align-items: center;
					input{
						text-align: right;
					}
				}
			}

			.shop_content {
				background-color: #fff;
				padding: 41rpx 20rpx 0 20rpx;

				.cont_tit {
					font-size: 30rpx;
					font-weight: bold;
					color: #808080;
				}

				.cont_txt {
					padding: 35rpx 0 0rpx 0;
					font-size: 30rpx;
					font-weight: bold;
					color: #000000;

					textarea {
						width: 100%;
						height: 200rpx;
					}
				}
			}

			.specification {
				padding: 29rpx 20rpx 38rpx 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 30rpx;
					font-weight: bold;
					color: #000000;
				}

				image {
					width: 46rpx;
					height: 46rpx;
				}
			}

			.num {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				padding: 43rpx 0 43rpx 0rpx;
				margin-bottom: 2rpx;

				.ml {
					// padding-left: 20rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #808080;
				}

				.money {
					font-size: 30rpx;
					font-weight: bold;
					color: #000000;
					padding-left: 103rpx;
				}

				.money2 {
					padding-left: 0;
				}

				input {
					width: 200rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #000000;
					padding-left: 103rpx;
				}

				.nums {
					display: flex;
					border: 1px solid #E2E2E2;
					border-radius: 5px 0px 0px 5px;

					.pad {
						// padding: 20rpx;
						line-height: 60rpx;
						text-align: center;
						width: 69rpx;
						height: 60rpx;
						text-align: center;
					}

					.bord {
						border-left: 1px solid #E2E2E2;
						border-right: 1px solid #E2E2E2;
					}
				}

				.operate {
					display: flex;
					font-size: 24rpx;
					font-weight: bold;
					color: #FFFFFF;

					.change {
						background: #0F82FF;
						padding: 21rpx;
					}

					.remove {
						background: #FF0707;
						padding: 21rpx;
					}
				}

			}

			.num_two {
				padding: 25rpx 50rpx 25rpx 20rpx;
				margin-bottom: 62rpx;
			}

			.confirm {
				position: fixed;
				bottom: 0;
				width: 750rpx;
				text-align: center;
				padding: 34rpx 0;

				background: #FE4E00;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
			}
		}
	}
</style>
